<ion-header class="opacity-header">
  <ion-toolbar class="opacity-toolbar">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title class="opacity-title">盛融贷</ion-title>
    <ion-buttons slot="end">
      <ion-button [routerLink]="['/auth/system-message']">
        <ion-icon name="mail-unread"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [scrollEvents]="true" (ionScroll)="scrollHandler($event)">
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
        pullingText="下拉刷新"
        refreshingText="加载中...">
    </ion-refresher-content>
  </ion-refresher>
  <!-- 轮播器 -->
  <ion-slides *ngIf="imgList.length > 0" [scrollbar]="true" [options]="slideOpts">
    <ion-slide *ngFor="let img of imgList; trackBy:img">
      <img src="{{HOST + img}}">
    </ion-slide>
  </ion-slides>
  <!-- 横向菜单 -->
  <ion-grid class="row-menu-box">
    <ion-row>
      <ion-col>
        <a [routerLink]="['/novice-guide']">
          <span class="iconfont icon-mudedi red"></span>
          <span>新手指南</span>
        </a>
      </ion-col>
      <!--<ion-col>-->
        <!--<a>-->
          <!--<span class="iconfont icon-gongzuotai red"></span>-->
          <!--<span>信息披露</span>-->
        <!--</a>-->
      <!--</ion-col>-->
      <ion-col>
        <a [routerLink]="['/fund-custody-new']">
          <span class="iconfont icon-anquanbaozhang-xianxing blue"></span>
          <span>资金存管</span>
        </a>
      </ion-col>
      <ion-col>
        <a [routerLink]="['/guarantee-system']">
          <span class="iconfont icon-tuihuobaozhang green"></span>
          <span>保障体系</span>
        </a>
      </ion-col>
    </ion-row>
  </ion-grid>
  <!-- 新标推荐 -->
  <section class="item-box">
    <header>
      <span class="item-type color-blue">{{title.firstTitle}}</span>
      <span float-right class="color-gray">{{title.subTitle}}</span>
    </header>
    <article text-center class="item-content color-gray">
      <ion-grid>
        <ion-row>
          <ion-col>
            <h5 class="title-remark color-blue">
              {{firstBid['title']}}({{firstBid['bidNo'] || firstBid['bid_no']}})
            </h5>
            <p class="prod-name-new"></p>
            <p class="rate-of-return color-orange">{{firstBid['apr']}}%</p>
            <p>参考年收益率</p>
            <div class="item-more">
              <span *ngIf="firstBid['welfare_bid']" class="color-orange"><i class="iconfont icon-licaishouyi"></i>定向标</span>
              <span>{{firstBid['amount'] | tenThousand}}元</span>
              <span>{{firstBid['period']}}{{firstBid['periodUnit']}}</span>
              <span>{{firstBid['status'] | i18nPlural:configService.bidStatus}}</span>
            </div>
            <a class="link-btn bg-orange" [class.disabled]="(firstBid['status'] | i18nPlural:configService.bidStatus) ==='已满标'" (click)="pushDetail(firstBid['bidIdSign'] || firstBid['sign'])">
              {{(firstBid['status'] | i18nPlural:configService.bidStatus) ==='已满标' ? '已满标' : '立即购买'}}
            </a>
          </ion-col>
        </ion-row>
      </ion-grid>
    </article>
  </section>
  <!-- 散标专区 -->
  <section *ngIf="bidList.length > 0" class="item-box">
    <header>
      <span class="item-type color-blue">散标专区</span>
    </header>
    <article class="item-content color-gray">
      <ion-grid class="custom-grid" *ngFor="let bid of bidList; trackBy:bid?.id" (click)="pushDetail(bid['bidIdSign'])">
        <ion-row>
          <ion-col size="9" class="prod-name color-blue">
            {{bid['title']}}({{bid['bidNo']}})
            <span *ngIf="bid['welfare_bid']" class="color-orange dingxiangbiao"><i class="iconfont icon-licaishouyi"></i>定向标</span>
          </ion-col>
          <ion-col size="3" class="progress-flag">
          <span [class.bg-orange]="bid['status'] === 1" [class.bg-light-gray]="bid['status'] !== 1">
            {{bid['status'] | i18nPlural:configService.bidStatus}}
          </span>
          </ion-col>
        </ion-row>
        <ion-row class="second-row">
          <ion-col>
            <p class="rate-of-return color-orange">{{bid['apr']}}%</p>
            <p>参考年收益率</p>
          </ion-col>
          <ion-col>
            <p class="other-info color-blue">{{bid['period']}}{{bid['periodUnit']}}</p>
            <p>期限</p>
          </ion-col>
          <ion-col>
            <p class="other-info color-blue">{{bid['amount'] | tenThousand}}元</p>
            <p>总金额</p>
          </ion-col>
        </ion-row>
      </ion-grid>
    </article>
  </section>
  <section class="loan-box">
    <header>我要借款</header>
    <a class="loan-link" [routerLink]="['/auth/loan', {userRole: 2, from: '/tabs/home'}]">
      <div class="amount-box">
        <span class="amount">100</span>
        <span class="unit">万</span>
      </div>
      <div>
        <p>多种借款方式可选</p>
        <p>让您的资金问题迎刃而解</p>
      </div>
      <span class="loan-btn" float-right>立即申请</span>
    </a>
  </section>

  <!-- 底部信息 -->
  <div class="content-bottom" margin-top>
    <ion-grid>
      <ion-row>
        <ion-col size="4" offset="2">
          <p>服务电话</p>
          <p>{{aboutInfo['telephone']}}</p>
        </ion-col>
        <ion-col size="4">
          <p>QQ群</p>
          <p>{{aboutInfo['qqcode']}}</p>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

</ion-content>
